<template>
  <j-modal
    title="线索详情"
    width="50%"
    :visible.sync="visible"
    cancelText="关闭"
    class="pop-table"
    :okClose="false"
    :closable="false">
    <div class="card-container">
      <div class="box">
        <a-row>
          <a-col :span="24" title="线索标题">
            <a-form-item
              :labelCol="{xs: { span: 24 },sm: { span: 4 }}"
              :wrapperCol="{xs: { span: 26 },sm: { span: 20 }}"
              label="线索标题">
              {{ recordLocal.cluesTitle || recordLocal.cluesName }}
            </a-form-item>
          </a-col>
          <a-col :span="24" v-if="recordLocal.cluesSubTitle != null ">
            <a-form-item
              :labelCol="{xs: { span: 24 },sm: { span: 4 }}"
              :wrapperCol="{xs: { span: 26 },sm: { span: 20 }}"
              label="线索副标题">
              {{ recordLocal.cluesSubTitle }}
            </a-form-item>
          </a-col>
          <a-col :span="24" title="线索来源"
                 v-if="recordLocal.cluesSource == 1 || recordLocal.cluesSource == 2 || recordLocal.cluesSource == 3">
            <a-form-item
              :labelCol="{xs: { span: 24 },sm: { span: 4 }}"
              :wrapperCol="{xs: { span: 26 },sm: { span: 20 }}"
              label="线索来源">
              <span v-if="recordLocal.cluesSource == 1">爬虫</span>
              <span v-if="recordLocal.cluesSource == 2">用户爆料</span>
              <span v-if="recordLocal.cluesSource == 3">内部发起</span>
            </a-form-item>
          </a-col>
          <a-col :span="24" title="爬虫来源"
                 v-if="recordLocal.crawlerSource == 0 || recordLocal.crawlerSource == 1 || recordLocal.crawlerSource == 2 || recordLocal.crawlerSource == 3 || recordLocal.crawlerSource == 4 || recordLocal.crawlerSource == 5">
            <a-form-item
              :labelCol="{xs: { span: 24 },sm: { span: 4 }}"
              :wrapperCol="{xs: { span: 26 },sm: { span: 20 }}"
              label="爬虫来源">
              <span v-if="recordLocal.crawlerSource == 0">今日头条</span>
              <span v-if="recordLocal.crawlerSource == 1">学习强国</span>
              <span v-if="recordLocal.crawlerSource == 2">微信公众号搜索</span>
              <span v-if="recordLocal.crawlerSource == 3">微博搜索</span>
              <span v-if="recordLocal.crawlerSource == 4">新华网</span>
              <span v-if="recordLocal.crawlerSource == 5">百度</span>
            </a-form-item>
          </a-col>
          <a-col :span="24" title="关键词" v-if="recordLocal.keyword !=null">
            <a-form-item
              :labelCol="{xs: { span: 24 },sm: { span: 4 }}"
              :wrapperCol="{xs: { span: 26 },sm: { span: 20 }}"
              label="关键词">
              <span>{{ recordLocal.keyword }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="24" title="备注" v-if="recordLocal.remark != null">
            <a-form-item
              :labelCol="{xs: { span: 24 },sm: { span: 4 }}"
              :wrapperCol="{xs: { span: 26 },sm: { span: 20 }}"
              label="备注">
              <span>{{ recordLocal.remark }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="24" title="转发量" v-if="recordLocal.forwardNum != null">
            <a-form-item
              :labelCol="{xs: { span: 24 },sm: { span: 4 }}"
              :wrapperCol="{xs: { span: 26 },sm: { span: 20 }}"
              label="转发量">
              <span>{{ recordLocal.forwardNum }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="24" title="阅读量" v-if="recordLocal.readNum != null">
            <a-form-item
              :labelCol="{xs: { span: 24 },sm: { span: 4 }}"
              :wrapperCol="{xs: { span: 26 },sm: { span: 20 }}"
              label="阅读量">
              <span>{{ recordLocal.readNum }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="24" title="评论量" v-if="recordLocal.remarkNum !=null">
            <a-form-item
              :labelCol="{xs: { span: 24 },sm: { span: 4 }}"
              :wrapperCol="{xs: { span: 26 },sm: { span: 20 }}"
              label="评论量">
              <span>{{ recordLocal.remarkNum }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="24" title="新闻发布时间" v-if="recordLocal.releaseTime !=null">
            <a-form-item
              :labelCol="{xs: { span: 24 },sm: { span: 4 }}"
              :wrapperCol="{xs: { span: 26 },sm: { span: 20 }}"
              label="新闻发布时间">
              <span>{{ recordLocal.releaseTime }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="24" title="爬取/创建时间">
            <a-form-item
              :labelCol="{xs: { span: 24 },sm: { span: 4 }}"
              :wrapperCol="{xs: { span: 26 },sm: { span: 20 }}"
              label="爬取/创建时间">
              <span>{{ recordLocal.createTime }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="24" title="爆料人" v-if="recordLocal.userName != null">
            <a-form-item
              :labelCol="{xs: { span: 24 },sm: { span: 4 }}"
              :wrapperCol="{xs: { span: 26 },sm: { span: 20 }}"
              label="爆料人">
              <span>{{ recordLocal.userName }}</span>
            </a-form-item>
          </a-col>
          <a-col :span="24" title="链接地址" v-if="recordLocal.crawlerUrl != null">
            <a-form-item
              :labelCol="{xs: { span: 24 },sm: { span: 4 }}"
              :wrapperCol="{xs: { span: 26 },sm: { span: 20 }}"
              label="链接地址">
              <span><a :href="recordLocal.crawlerUrl" target="_blank">点击跳转</a></span>
            </a-form-item>
          </a-col>
          <a-col :span="24" title="图片" v-if="recordLocal.imgUrl1 != null">
            <a-form-item
              :labelCol="{xs: { span: 24 },sm: { span: 4 }}"
              :wrapperCol="{xs: { span: 26 },sm: { span: 20 }}"
              label="图片">
              <div class="imgList">
                <div>
                  <img :src="recordLocal.imgUrl1"/>
                  <img :src="recordLocal.imgUrl2"/>
                  <img :src="recordLocal.imgUrl3"/>
                </div>
                <div>
                  <img :src="recordLocal.imgUrl4"/>
                  <img :src="recordLocal.imgUrl5"/>
                  <img :src="recordLocal.imgUrl6"/>
                </div>
              </div>
            </a-form-item>
          </a-col>
        </a-row>
      </div>
    </div>
  </j-modal>
</template>

<script>
  import DetailList from '@/components/tools/DetailList'

  const DetailListItem = DetailList.Item;

  export default {
    name: 'ClueDetail',
    components: {
      DetailList,
      DetailListItem
    },
    data() {
      return {
        visible: false,
        labelCol: {
          xs: {span: 24},
          sm: {span: 5}
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16}
        },
        recordLocal: {},
      }
    },
    methods: {
      show(record) {
        this.recordLocal = record;
        this.visible = true;
      }
    }
  }
</script>

<style scoped>
  .imgList ul li {
    list-style: none;
  }

  .imgList img {
    margin-right: 20px;
    margin-block-end: 20px;
    height: 150px;
    width: 150px;
    border-radius: 4px;
  }
</style>
